<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>原生的Ajax代码</title>
    <script type="text/javascript">
        function ajaxRequest() { //先请求再响应
// 				1、我们首先要创建XMLHttpRequest 
            var xmlhttprequest = new XMLHttpRequest();
// 				2、调用【open方法】设置请求参数, 形参里的 true/false  表示 异步/同步
            xmlhttprequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", false);
            // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            //在send之前 应该是要判断服务器返回出来的readyState和status是否正常，根据不同的结果发送请求到客户端
            xmlhttprequest.onreadystatechange = function () {
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { //如果等于表示可传

                    alert("收到[服务器]返回的数据: " + xmlhttprequest.responseText)

                    //局部更新:页面上其它内容不变，只会变一部分，地址栏不会变化
                    var jsonObj = JSON.parse(xmlhttprequest.responseText);
                    // 把响应的数据显示在页面上
                    document.getElementById("div01").innerText = "编号: " + jsonObj.id + ",姓名: " + jsonObj.name;
                }
            }
// 				3、调用send方法发送请求
            xmlhttprequest.send();

            alert("这是最后一行代码")
        }
    </script>
</head>
<body>
<!--<a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>-->
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>